<template>
	<div class="transaction navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" @click-right="BTBinfo">

			<template #right>
				<img class="smjl" src="../../assets/robot/btbinfo.png" alt="">
			</template>
		</van-nav-bar>
		<van-sticky>
			<div class="rs_top">
				<div @click="tab_index = index" v-for="item,index in 2" :key="index" :class="index == tab_index ? 'on' : ''">
					{{index == 0 ? '购买' : '出售'}}
				</div>

				<div class="on_sold" :style="tab_index == 0 ? 'left:1.45rem' : 'left:5.25rem' "></div>
			</div>
		</van-sticky>


		<div>
			<div v-if="!tran_info" style="text-align: center;padding-top: 2rem;">
				<van-loading size="24px">加载中...</van-loading>
			</div>

			<transition name="fold-right-effect">
				<div class="list_view" v-if="tab_index == 0">
					<div v-if="tran_info && tran_info.selllist.length <= 0" style="text-align: center;padding-top: 2rem;">
						<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
					</div>
					<div class="tran_item" v-for="item,index in tran_info.selllist" :key="index">
						<div class="top">
							<span>数量：{{item.num}}BTS</span>
							<span>总价：{{item.rmb}}CNY</span>
						</div>
						<p>ID：{{item.sellmobile}}</p>
						<div>
							<div>
								等级：
								<img src="../../assets/user/v1.png" alt="">
							</div>

							<button @click="buyOpen(item,index)">买入</button>
						</div>
					</div>
				</div>
			</transition>

			<transition name="fold-left-effect">
				<div class="list_view" v-if="tab_index == 1">
					<div class="sell_top">
						<p>在售数量：{{tran_info.sellnum}}</p>
						<button @click="sell_show = true">
							<span>+</span>
							出售
						</button>
					</div>
					
					
					<div v-if="tran_info && tran_info.mylist.length <= 0" style="text-align: center;padding-top: 2rem;">
						<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
					</div>
					<div class="tran_item" v-for="item,index in tran_info.mylist" :key="index">
						<div class="top">
							<span>数量：{{item.num}}BTS</span>
							<span>总价：{{item.rmb}}CNY</span>
						</div>
						<div class="sell_bottom">
							<div>
								发售时间：{{item.creat_time1}}
							</div>
							<div class="sell_button">
								<button @click="cancelOrder(item.id,index)">撤销</button>
								<button @click="$router.push('/orderDetails')">查看详情</button>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>

		<div class="tran_bootom">
			<p>今日价格：1bts={{tran_info.btsrmb}}cny</p>
			<p>市场总量：{{tran_info.sellnum}}（bts）</p>
		</div>

		<van-popup v-model="buy_show" position="bottom" duration="0.2">
			<div class="br_parameter">
				<div class="title">
					确定交易
				</div>

				<p>用户ID：{{item_info.sellmobile}}</p>
				<div class="buy_num">
					<span>买入数量：{{item_info.num}}</span>
				</div>
				<p>总价：{{item_info.rmb}}CNY</p>

				<div class="br_bottom">
					<div @click="buy_show = false">取消</div>
					<div @click="buyConfirm">确定</div>
				</div>
			</div>
		</van-popup>

		<van-popup v-model="sell_show" position="bottom" duration="0.2">
			<div class="br_parameter2">
				<div class="chushou">
					<div class="cs_top">
						<p @click="sellInfo">手续费 <img src="../../assets/robot/wenhao.png" alt="">：{{tran_info.sxf}}%</p>
						<p>实际出售：<span>{{tran_info.todayzong}}</span>BTS</p>
					</div>

					<div class="cs_content">
						<p>出售数量</p>
						<div>
							<input v-model="sell_money" placeholder="请输入10-500BTS" type="number">
							<img src="../../assets/pets/go.png" alt="">
						</div>
					</div>

					<div class="cs_bottom">
						<p>当前账户余额 <span>{{tran_info.bts_money}}</span> BTS</p>
						<p>剩余交易次数：{{tran_info.sycs}}</p>
					</div>
				</div>

				<button class="chushouqr" @click="sellConfirm">确定出售</button>
			</div>
		</van-popup>

		<TipsPopup ref="TipsPopup"></TipsPopup>

		<InputPassword ref="InputPassword"></InputPassword>
	</div>
</template>

<script>
	// 密码输入
	import InputPassword from '../../components/InputPassword.vue'

	// 提示语
	import TipsPopup from '../../components/TipsPopup.vue'

	export default {
		name: "transaction",
		components: {
			TipsPopup,
			InputPassword
		},
		async created() {

			this.getList()

		},
		data() {
			return {
				// 出售输入的数额
				sell_money: 0,

				// 出售操作框
				sell_show: false,

				// 购买确定 
				buy_show: false,

				tab_index: 0,

				// 页面整体数据
				tran_info: "",

				item_info: {

				},
				
				// 撤单拦截 防止连点
				chedan_status:true
			}
		},
		methods: {
			// 撤单
			async cancelOrder(id,index){
				
				if(!this.chedan_status){
					return this.$toast("操作过于频繁");
				}
				
				this.chedan_status = false
				
				try{
					
					const data = await this.$apis.Common.cancelOrder({id:id})
					// this.sell_info.dpplist = 
					this.$toast(data.msg)
					
					this.getList()
					
					// this.tran_info.mylist.splice(index,1)
					
					setTimeout( () => { this.chedan_status = true},1500)
					
				}catch(e){
					//TODO handle the exception
					this.$toast(e.msg)
					
					setTimeout( () => { this.chedan_status = true},1500)
				}
				
			},
			
			// 买入密码弹出框
			buyConfirm() {

				this.$refs.InputPassword.open({
					methods: async () => {

						let post_data = {
							id: this.item_info.id,
							jymm: this.$refs.InputPassword.passowrd
						}

						try {

							const data = await this.$apis.Common.buybts(post_data)

							this.$toast(data.msg)
							
							this.tran_info.selllist.splice(this.item_info.index,1)
							
							setTimeout(() => {
								this.$refs.InputPassword.confirmShow = false
								this.$refs.InputPassword.showKeyboard = false
								this.$refs.InputPassword.passowrd = ""
								this.buy_show = false
							}, 1000)

						} catch (e) {

							if (e.pwd) setTimeout(() => {
								this.$refs.InputPassword.passowrd = ""
							}, 1000)

							this.$toast(e.msg)
							//TODO handle the exception
						}

					}
				})

			},
			// 出售弹出密码框
			sellConfirm() {
				
				if(this.sell_money <= 0){
					
					return this.$toast("请输入大于0的BTS数额")
					
				}
				
				this.$refs.InputPassword.open({
					methods: async () => {

						let post_data = {
							jymm: this.$refs.InputPassword.passowrd,
							money: this.sell_money
						}

						try {

							const data = await this.$apis.Common.sellbts(post_data)

							this.$toast(data.msg)

							setTimeout(() => {
								this.$refs.InputPassword.confirmShow = false
								this.$refs.InputPassword.showKeyboard = false
								this.$refs.InputPassword.passowrd = ""
								this.sell_money = false
								this.sell_show = false
								
								this.getList()
							}, 1000)

						} catch (e) {

							if (e.pwd) setTimeout(() => {
								this.$refs.InputPassword.passowrd = ""
							}, 1000)

							this.$toast(e.msg)
							//TODO handle the exception
						}

					}
				})

			},
			// 买入的商品信息
			buyOpen(item,index) {
				this.buy_show = true
				this.item_info.sellmobile = item.sellmobile
				this.item_info.num = item.num
				this.item_info.rmb = item.rmb
				this.item_info.id = item.id
				this.item_info.index = index
			},
			// 购买列表
			async getList() {

				try {

					const data = await this.$apis.Common.tran_list()

					this.tran_info = data.data

				} catch (e) {
					//TODO handle the exception
				}

			},

			// 右上角冒号
			BTBinfo() {

				this.$refs.TipsPopup.open({
					title: "交易说明",
					textType: "html",
					text: `
						<p>一.购买和出售额度限制比为1:1.5</p>
						<p>二.买入bts自动变成btb。Btb转化为bts比例请实时关注平台价格。</p>
						<p style="margin-bottom:.5rem">三.每个账户每日限制交易次数为3次，交易总量上限为1000个下限为10个 单笔交易数量上限为500个下限10个  </p>
					`,
					button: false
				})

			},
			
			sellInfo(){
				
				
					this.$refs.TipsPopup.open({
						title: "交易说明",
						textType: "html",
						text: `
							<p>一级会员：手续费为45%。</p>
							<p>二级会员：【直推30人，达到矿机购买120人】手续费30%。</p>
							<p>三级会员：【直推60人，达到矿机购买480人】手续20%。</p>
							<p style="margin-bottom:.5rem;margin-top:.25rem;color:#00FECA">*最终出售数量为扣除手续费后剩余数量。</p>
						`,
						button: false
					})
			}
		},

		watch: {
			sell_show: function() {
				this.sell_money = ""
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	@import '../../style/transition.less';

	.transaction {

		.br_parameter2 {
			font-size: .28rem;
			color: #94E9FF;
			padding-bottom: 0.6rem;
			background-color: #0f223a;
			box-shadow: inset 0px 0px 0.2rem 0px #1cb0d4;

			.chushouqr {
				display: block;
				border: none;
				background-color: transparent;
				outline: none;
				box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				font-size: .3rem;
				width: 6rem;
				height: .75rem;
				margin: auto;
				margin-top: .8rem;
				margin-bottom: 1rem;
				border-radius: .2rem;
			}

			.chushou {
				width: 100%;

				span {
					color: #00FECA;
				}


				.cs_top {
					padding: .3rem;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					p:nth-child(1) {
						display: flex;
						align-items: center;
					}
				}

				.cs_content {
					border-bottom: 1px solid #1A304F;
					padding: .5rem .35rem .39rem .34rem;
					box-sizing: border-box;

					p {
						margin-bottom: .4rem;
					}

					input {
						border: none;
						background-color: transparent;
						outline: none;
					}

					input::placeholder {
						color: #3A627E;
					}

					>div {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.cs_bottom {
					padding: .18rem 0 .13rem .35rem;
					box-sizing: border-box;
					color: #94E9FF;
					font-size: .24rem;
				}
			}
		}


		.br_parameter {
			padding-bottom: .6rem;
			background-color: rgb(15, 34, 58);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);

			.title {
				padding-top: .39rem;
				padding-bottom: .28rem;
				font-size: .32rem;
				color: #94E9FF;
				text-align: center;
				border-bottom: 1px solid #1A304F;
				margin-bottom: .31rem;
			}

			.buy_num {
				display: flex;
				align-items: center;
				padding-left: 2.17rem;
				color: #94E9FF;
				font-size: .3rem;
				margin-top: .38rem;
				margin-bottom: .45rem;
			}

			.van-stepper {
				border: 1px solid #94E9FF;
				box-sizing: border-box;
				border-radius: .35rem;


				/deep/ .van-stepper__input {
					width: .35rem;
					height: .35rem;
					color: #94E9FF;
					background-color: transparent;
				}

				/deep/ button {
					border-radius: 50%;
					width: .35rem;
					height: .35rem;
					background-color: #94E9FF;
					color: #11223A;
				}
			}

			p {
				padding-left: 2.17rem;
				box-sizing: border-box;
				font-size: .3rem;
				color: #94E9FF;
			}

			.br_bottom {
				display: flex;
				align-items: center;
				justify-content: space-around;

				div {
					margin-top: .96rem;
					width: 2rem;
					height: .44rem;
					background: rgba(15, 33, 56, 1);
					border-radius: .1rem;
					text-align: center;
					line-height: .44rem;
					font-size: .3rem;
				}

				>div:nth-child(1) {
					color: #94E9FF;
					box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				}

				>div:nth-child(2) {
					color: #0F2138;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
				}
			}

		}

		.list_view {
			padding-bottom: 2rem;
			position: absolute;
			width: 100%;
		}

		.sell_top {
			font-size: .26rem;
			color: #94E9FF;
			width: 100%;
			height: .96rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: .4rem .4rem .3rem .4rem;
			box-sizing: border-box;
			background-color: rgb(15, 29, 54);

			button {
				font-size: .24rem;
				box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				border-radius: .17rem;
				border: none;
				background-color: transparent;
				padding: .03rem .25rem;

				span {
					margin-right: .1rem;
				}
			}
		}

		.tran_bootom {
			position: fixed;
			bottom: 0;
			color: #0F1E34;
			font-size: .26rem;
			text-align: center;
			width: 100%;
			height: .98rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: linear-gradient(0deg, rgba(28, 206, 244, 1) 0%, rgba(0, 254, 202, 1) 100%);
		}

		.tran_item {
			padding: .43rem .32rem .25rem .46rem;
			border-bottom: 1px solid #1A304F;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			color: #94E9FF;
			font-size: .3rem;

			div {
				display: flex;
				align-items: center;
			}

			.top {
				justify-content: space-between;

				>span:nth-child(2) {
					font-size: .24rem;
				}
			}

			>p:nth-child(2) {
				font-size: .24rem;
				margin: .14rem 0;
			}

			>div:nth-child(3) {
				justify-content: space-between;
			}

			button,
			.sell_button button {
				width: .98rem;
				height: .41rem;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
				border-radius: .1rem;
				text-align: center;
				color: #0F2138;
				line-height: .41rem;
				border: none;
				background-color: transparent;
			}

			.sell_bottom {
				justify-content: space-between;
				margin-top: .3rem;
				font-size: .24rem;

				.sell_button button {
					width: 1.1rem;
					padding: 0rem .1rem;
					margin-left: .18rem;
				}

				button:nth-child(2) {
					width: 1.2rem;
				}
			}
		}

		.rs_top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			height: .88rem;
			background-color: rgb(17,32,55);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
			font-size: .3rem;
			color: #3A627E;

			.on {
				color: #94E9FF;
			}

			.on_sold {
				position: absolute;
				width: .8rem;
				height: 2px;
				background-color: #94E9FF;
				bottom: 0;
				transition: all .5s;
			}
		}
	}
</style>
